<!-- 绩效 员工费用明细 页面 -->
<template>
  <div class="container">
    <vxe-toolbar
      id="warehouseLocationId"
      :custom="{ storage: true }"
      export
      :refresh="{query: findList}"
    >
      <template v-slot:buttons>
        <div class="btnMargin">
          <el-button @click="findList">查询</el-button>
          <el-button @click="billingAmount" :disabled="billingShow">修改计费量</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      :export-config='{type:"csv"}'
      class="mytable-footer"
      height="640"
      align="center"
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      sort-config.remote
      @sort-change="sortField"
      @checkbox-change="selectChangeEvent"
      :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="150" />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.warehouseCode" placeholder="请输入所属仓库 " style="width:100%" clearable>
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column
          field="gmtBilling"
          show-header-overflow
          show-overflow
          title="计费日期"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtBillingRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtBilling')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="feeTypeText"
          title="费用类型"
          min-width="150"
          sortable
          :formatter="formatterFeeType"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.feeType" placeholder="请选择" clearable>
            <el-option
              v-for="item in feeTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipmentName" title="入驻商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.shipmentCode" clearable filterable placeholder="入驻商">
            <el-option
              v-for="item in options"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="staffName" title="员工姓名" min-width="150" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.staffName" placeholder="请输入员工姓名" clearable />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="phone" title="手机号" min-width="150" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.phone" placeholder="请输入手机号" clearable />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="billingMethod" title="计费方式" min-width="140" show-header-overflow show-overflow :formatter="formatterBillingMethodType"/>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.billingMethod" placeholder="请选择" clearable>
            <el-option
              v-for="item in billingMethodList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="billingPrice" title="计费单价" min-width="200" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.billingPriceStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.billingPriceEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="billingQuantity" title="计费量" min-width="210" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.billingQuantityStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.billingQuantityEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>

       <vxe-table-column>
        <vxe-table-column field="amountMoney" title="金额" min-width="210" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.amountMoneyStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.amountMoneyEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="rewardAmount" title="奖励" min-width="190" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.rewardAmountStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.rewardAmountEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="punishAmount" title="惩罚" min-width="190" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.punishAmountStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.punishAmountEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
    <!-- 修改计费量 -->
    <vxe-modal
      v-model="operationModel"
      title="修改计费量"
      width="520"
      height="230"
      destroy-on-close
      resize
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="计费方式" prop="billingMethod">
          <el-input type="text"  v-model="form.billingMethod" style="width:85%" :disabled='true' />
        </el-form-item>
        <el-form-item label="计费量" prop="billingQuantity">
          <el-input v-model="form.billingQuantity" style="width:85%" @input="billingInput" />
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button type="primary" :loading="confirmLoad" plain @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </vxe-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import { packTaskList } from '@/api/packManagement/prePackaged'
import {
  staffCosts,
  updateBillingQuantity
} from '@/api/performanceManage/staffCosts'
import { getWarehouse} from '@/api/basicInfo'
import { listDict } from "@/api/store";
import { shipments } from "@/api/outStorage"; // 入驻商接口
import { param } from '@/utils'
export default {
  name: "packageManagement",
  components: { },
  props: {},
  data() {
    return {
      tableData: [],
      //仓库数据
      warehouseData:[],
      feeTypeList: [
        { value: 'pack', label: '打包' },
        { value: 'paste', label: '贴单' },
        { value: 'pack_paste', label: '打包和贴单' }
      ],
      //计费方式:days天, hours工时, pieces件
      billingMethodList:[
        { code: "days", name: "天" },
        { code: "hours",name: "工时" },
        { code: "pieces",name: "件" }
      ],
      orderData: [],
      loading: false,
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      form: {
        billingMethod: '按工时',
      },
      gmtModifiedRange:"",
      gmtCreatedRange: '',
      gmtFinishRange: '',
      gmtBillingRange: '',
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      rules: {
        billingMethod: [
          { required: true, message: '计费方式', trigger: 'blur' }
        ],
        billingQuantity: [
          { required: true, message: '请输入计费量', trigger: 'blur' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '计费量必须大于0' }
        ]
      },
      operationModel: false,
      confirmLoad: false,
      billingShow: true,
      selectList: [],
      options: [],
      staffCostsList: []
    };
  },
  watch: {},
  created() {
    this.findList();
    this.getWarehouse();
  },
  computed: {

  },
  mounted() {},
  methods: {
    // 排序
    sortField({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
      } else {
        this.listQuery.sortField = "";
      }
      // this.findList();
    },
    // 查询
    findList() {
      this.billingShow = true
      shipments().then(res => {
        this.options = res.data
      })
      if(this.listQuery.gmtBillingStart === '' && this.listQuery.gmtBillingEnd === '' ) {
        delete this.listQuery.gmtBillingStart
        delete this.listQuery.gmtBillingEnd
      }
      return staffCosts(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
      })
    },
    billingInput() {
      this.$forceUpdate()
    },
     //仓库查询
    getWarehouse(){
      getWarehouse().then(response => {
        this.warehouseData = response.data
      })
    },
    // 勾选、取消事件
    selectChangeEvent({ checked, records }) {
      this.selectList = this.$refs.xTable.getCheckboxRecords()
      if(this.selectList.length >= 1){
        for (let i = 0; i < this.selectList.length; i++) {
          if(this.selectList[i].billingMethod === 'hours'){
            this.billingShow = false
          } else {
            this.billingShow = true
            break
          }
        }
      }else {
        this.billingShow = true
      }
    },
    // 时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.findList();
    },
       // 翻译计费方式
    formatterBillingMethodType({ row, cellValue }) {
      let val = row.billingMethod;
      this.billingMethodList.forEach(e=>{
        if(row.billingMethod == e.code){
          val =  e.name;
          return;
        }
      })
      return val;
    },
    // 翻译审核状态
    formatterFeeType({row, cellValue }) {
      let val = row.feeType;
      this.feeTypeList.forEach(e=>{
        if(row.feeType == e.value){
          val =  e.label;
          return;
        }
      })
      return val;
    },
    // 修改计费量
    billingAmount() {
      let codes = []
      let prices = []
      let billings = []
      this.selectList.forEach((i) => {
        billings.push(i.billingMethod)
        codes.push(i.code)
        prices.push(i.billingPrice)
      })
      this.staffCostsList = codes.map((code,i) => ({code, billingMethod:billings[i], billingPrice:prices[i]}))
      this.operationModel = !this.operationModel
    },
    // 确定
    confirm(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.confirmLoad = true,
          this.form.staffCostsList = this.staffCostsList
          updateBillingQuantity(this.form).then(res => {
            this.$message({ message: res.msg, type: 'success' })
            this.operationModel = !this.operationModel
          }).finally(() => {
            this.findList();
            this.form.billingQuantity = ''
            this.confirmLoad = false
          })
        }
      })
    }
  },
};
</script>
<style scoped>
.container {
  margin: 16px;
}
.inputWidth {
  width: 300px;
}
.dialog-footer{
  margin: 5px 10px 15px 0;
  float: right;
}
/* .mytable-footer{
  margin-top: 30px;
} */
/deep/ .vxe-table--render-default .vxe-cell {
  white-space: revert;
}
.btnMarginTop{
  margin-bottom: 10px;
}
/* .btnMargin{
  margin-bottom: 10px;
} */

</style>

